/*
 * @Author: hy 
 * @Date: 2018-05-28 11:10:55 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-30 14:49:02
 */
<template>
    <div class="mapCon">
      <div class="mapCenter"   id="map"></div>
    </div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/world.js");
import chart from "@/components/Charts/chart";
var hoverImg = require("./mapHover.png");
const planePath =
  "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

// mapStyle: 地图的style 样式  ，value: 可用 v-model 传入路线数据数组数据  placeData: 地点数组
/** placeData = [
          {
            name: "广州",
            value: [113.72, 23.13],
            symbolSize: 2,
            itemStyle: { normal: { color: "#FCA057" } }
          },]
           */
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    value(res) {
      this.fetchMap(res);
    }
  },
  name: "index",
  components: { chart },
  mounted() {
  },
  data() {
    return {
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  methods: {
    fetchMap(res) {
      var allData = {
        citys: [],
        moveLines: []
      };
      res.forEach(item => {
        var newObj = {
          name: item.name,
          value: [item.lng, item.lat, 4],
          symbolSize: 10,
          itemStyle: {
            normal: {
              color: "#28E787"
            }
          }
        };
        allData.citys.push(newObj);
        var fromToObj = {
          fromName: "洛阳",
          toName: item.name,
          coords: [[112.4600140829, 34.6244432169], [item.lng, item.lat]]
        };
        allData.moveLines.push(fromToObj);
      });
      var option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              // 鼠标hover，阴影效果
              width: 0,
              color: "transparent"
            }
          },
          backgroundColor: "transparent",
          extraCssText: "text-align:left,background-color:transparent",
          formatter: function(params, util) {
            var toolFirst =
              "<div style='position:relative;left:0'><img src=" +
              hoverImg +
              " style='width:313px;height:132px'>";
            var toolEnd = "</img></div>";
            var toolTiphtml =
              "<div style='position:absolute;left:140px;top:20px;color:#01f5ff'>";
            return toolFirst + toolTiphtml + "</div>" + toolEnd;
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["rgb(0, 209, 255)", "rgb(40, 231, 135)", "rgb(0, 255, 255)"]
          }
        },
        geo: {
          show: true,
          map: "world",
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#0071B7",
              borderColor: "#0071B7"
            },
            emphasis: {
              areaColor: "#0071B7"
            }
          }
        },
        series: [
          {
            name: "飞机后面",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 1,
            large: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            effect: {
              show: true,
              period: 20,
              trailLength: 0.9,
              color: "#00FFFF",
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: "#00FFFF",
                width: 0,
                curveness: 0.3
              }
            },
            data: allData.moveLines
          },
          {
            name: "飞机",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            effect: {
              show: true,
              period: 20,
              trailLength: 0,
              symbol: planePath,
              symbolSize: 20,
              color: "#66F8FD"
            },
            lineStyle: {
              normal: {
                width: 0,
                color: "#66F8FD",
                opacity: 0.4,
                curveness: 0.3
              }
            },
            data: allData.moveLines
          },
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: "#0071B7",
                borderColor: "#0071B7"
              },
              emphasis: {
                areaColor: "#1e4274"
              }
            },
            data: allData.citys
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: allData.citys,
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: ["100%", "100%"],
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#0071B7",
                shadowBlur: 10,
                shadowColor: "#0071B7"
              }
            },
            zlevel: 1
          }
        ]
      };
      var self = this;
      if (this.mapChart) {
        this.mapChart.clear();
        this.mapChart.dispose();
      }
      self.mapChart = echarts.init(document.getElementById("map"));
      self.mapChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.mapCon {
  position: absolute;
  margin: auto;
  left: 0;
  bottom: 150px;
  right: 0;
}
.mapCenter {
  min-width: 1000px;
  min-height: 580px;
}
</style>
